import * as echarts from "echarts";
import styles from "../index.module.less";
import { get_fontColor } from ".";
import IMToolTip from "@/components/common/ToolTip";
const _toPercent = (new_num, old_num) => {
  new_num = +new_num;
  old_num = +old_num;
  const total = old_num + new_num;
  if (total === 0 || old_num === 0) return "--";
  const result = +((old_num / total) * 100).toFixed(2);
  if (result === 0) return "--";
  return result > 0 ? "+" + result + "%" : result + "%";
};
const _getPercent = (new_num, new_total, old_num, old_total) => {
  new_num = +new_num;
  new_total = +new_total;
  old_num = +old_num;
  old_total = +old_total;
  if (new_num === 0 || new_total === 0 || old_num === 0 || old_total === 0)
    return "--";
  const new_percent: any = parseFloat(_toPercent(new_num, new_total) as string);
  const old_percent: any = parseFloat(_toPercent(old_num, old_total) as string);
  const result = +((new_percent / old_percent - 1) * 100).toFixed(2);
  if (result === 0) return "--";
  return result > 0 ? "+" + result + "%" : result + "%";
};
export default defineComponent({
  setup(props, { expose }) {
    const _self = reactive<any>(getCurrentInstance());
    const formInline = reactive<any>({
      new_user_pay_amount: "",
      old_user_pay_amount: "",
      new_user_pay_num: "",
      old_user_pay_num: "",
      last_week_new_user_pay_num: "",
      last_week_old_user_pay_num: "",
      this_week_new_user_pay_num: "",
      this_week_old_user_pay_num: "",
      last_month_new_user_pay_num: "",
      last_month_old_user_pay_num: "",
      this_month_new_user_pay_num: "",
      this_month_old_user_pay_num: "",
      updated_at: "",
    });
    const drawPayAmountEchart = () => {
      const colorList = ["#4193f7", "#e5697a"];
      let option = {
        title: {
          subtext: $t("overview48"),
          left: "center",
          bottom: "12%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: true,
          orient: "vertical",
          bottom: 0,
        },
        series: [
          {
            type: "pie",
            center: ["50%", "42%"],
            radius: ["50%", "70%"],
            data: [
              {
                value: (formInline.new_user_pay_amount / 100).toFixed(2),
                name: $t("overview49"),
              },
              {
                value: (formInline.old_user_pay_amount / 100).toFixed(2),
                name: $t("overview50"),
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            itemStyle: {
              normal: {
                color: (colors) => colorList[colors.dataIndex],
              },
            },
          },
        ],
      };
      const el: any = _self.refs["pay_amount"];
      const _this: any = echarts.init(el);
      _this.setOption(option);
      window.addEventListener("resize", () => _this.resize());
    };

    const drawPayerNumEchart = () => {
      const colorList = ["#4193f7", "#e5697a"];
      let option = {
        title: {
          subtext: $t("overview51"),
          left: "center",
          bottom: "12%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: true,
          orient: "vertical",
          bottom: 0,
        },
        series: [
          {
            type: "pie",
            center: ["50%", "42%"],
            radius: ["50%", "70%"],
            data: [
              {
                value: parseInt(formInline.new_user_pay_num),
                name: $t("overview52"),
              },
              {
                value: parseInt(formInline.old_user_pay_num),
                name: $t("overview53"),
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            itemStyle: {
              normal: {
                color: (colors) => colorList[colors.dataIndex],
              },
            },
          },
        ],
      };
      const el: any = _self.refs["payer_num"];
      const _this: any = echarts.init(el);
      _this.setOption(option);
      window.addEventListener("resize", () => _this.resize());
    };
    const fetchData = async () => {
      const res: any = await overviewApi.queryRepurchase({});
      if (res.code != 200) return message.error(res.message);
      initObjAttr(formInline, res.data, "target");
    };
    const initPage = async () => {
      await fetchData();
      drawPayAmountEchart();
      drawPayerNumEchart();
    };
    expose({ initPage });
    return () => {
      const get_thisWeek = _toPercent(
        formInline.this_week_new_user_pay_num,
        formInline.this_week_old_user_pay_num
      );
      const get_lastWeek = _getPercent(
        formInline.this_week_new_user_pay_num,
        formInline.this_week_old_user_pay_num,
        formInline.last_week_new_user_pay_num,
        formInline.last_week_old_user_pay_num
      );
      const get_thisMonth = _toPercent(
        formInline.this_month_new_user_pay_num,
        formInline.this_month_old_user_pay_num
      );
      const get_lastMonth = _getPercent(
        formInline.this_month_new_user_pay_num,
        formInline.this_month_old_user_pay_num,
        formInline.last_month_new_user_pay_num,
        formInline.last_month_old_user_pay_num
      );
      return (
        <div class={styles.pie_chart_wrap}>
          <div class={styles.left}>
            <div class={styles.title} style="margin-left: 0px;">
              <span>{$t("overview54")}</span>
              <im-tooltip
                color="#ffffff"
                defaultValue={<info-circle-filled />}
                title={<div style="color: #333333;">{$t("overview55")}</div>}
              />
            </div>
            <div class={styles.pie_chart_container}>
              <div class={styles.pie_chart} ref="pay_amount"></div>
              <div class={styles.pie_chart} ref="payer_num"></div>
            </div>
          </div>
          <div class={styles.right}>
            <div class={styles.title} style="margin-left: 0px;">
              <span>{$t("overview56")}</span>
              <im-tooltip
                color="#ffffff"
                defaultValue={<info-circle-filled />}
                title={
                  <div style="color: #333333;">
                    {$t("overview56")} = {$t("overview57")} /{$t("overview58")}{" "}
                    * 100%
                  </div>
                }
              />
            </div>

            <div class={styles.data}>
              <div class={styles.this_week}>
                <div>{$t("overview59")}</div>
                <div class={get_fontColor(get_thisWeek)}>{get_thisWeek}</div>
                <div style="color: #909090;">
                  {$t("overview60")}
                  <i class={get_fontColor(get_lastWeek)}>{get_lastWeek}</i>
                </div>
              </div>
              <div class={styles.this_month}>
                <div>{$t("overview61")}</div>
                <div class={get_fontColor(get_thisMonth)}>{get_thisMonth}</div>
                <div style="color: #909090;">
                  {$t("overview62")}
                  <i class={get_fontColor(get_lastMonth)}>{get_lastMonth}</i>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
  },
});
